#include("/admin/common/header.html")
#include("/admin/common/footer.html")
#include("/admin/common/left.html")
#include("/admin/common/layout.html")
 
 #@layout()
 #define content()

<span class="layui-breadcrumb">
  <a href="#(ctx_path)/">首页</a>
  <a href="#(ctx_path)/admin/shop/attr"><cite>属性管理</cite></a>
</span>

<hr>


<form class="layui-form">
	<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

	<input type="hidden" name="id" value="#(vo.id)">
	<input type="hidden" name="categoryId" value="#(vo.categoryId)">

	<div class="layui-card">
		<div class="layui-card-header">基本信息</div>
		<div class="layui-card-body">
			

			<div class="layui-form-item">
				<div class="layui-inline" id="treeSelect" >
					<label class="layui-form-label">商品类别</label>
				</div>
			</div>
			

			<div class="layui-form-item">

				<div class="layui-inline">
					<label class="layui-form-label">属性名称</label>
					<div class="layui-input-inline">
						<input type="text" name="attrname" autocomplete="off"  value="#(vo.name)" class="layui-input">
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label">属性编码</label>
					<div class="layui-input-inline">
						<input type="text" name="attrcode" autocomplete="off" value="#(vo.code)" class="layui-input">
					</div>
				</div>

			</div>

			<div class="layui-form-item" style="width: 70%;">
				<label class="layui-form-label">描述</label>
				<div class="layui-input-block">
					<textarea name="attrdesc" placeholder="请输入内容" class="layui-textarea">#(vo.desp)</textarea>
				</div>
			</div>

		</div>
			
	</div>

	<div class="layui-card">
		<div class="layui-card-header">属性值信息</div>
		<div class="layui-card-body">
			
			<table class="layui-table">
				
				<thead>
					<tr>
						<th>属性值</th>
						<th>属性值编码</th>
						<th>描述</th>
						<th>排序</th>
						<th>
							<button class="layui-btn  layui-btn-normal" type="button" onclick="addTemplate();">+</button>
						</th>
					</tr>
				</thead>
				<tbody id="dataTbody">

					<tr style="display: none;">
						<td>
							<input type="text" name="value" autocomplete="off" class="layui-input">
						</td>
						<td>
							<input type="text" name="valuecode" autocomplete="off" class="layui-input">
						</td>
						<td>
							<input type="text" name="valuedesp" autocomplete="off" class="layui-input">
						</td>
						<td>
							<input type="text" name="valuepx" autocomplete="off" class="layui-input">
						</td>
						<td>
							<input type="hidden" name="valueid">
							<button class="layui-btn layui-btn-danger" type="button" onclick="delTemplate(this);">-</button>
						</td>
					</tr>

					#for(obj : vo.attrValues)
						<tr>
							<td>
								<input type="text" name="value" autocomplete="off" value="#(obj.value)" class="layui-input">
							</td>
							<td>
								<input type="text" name="valuecode" autocomplete="off" value="#(obj.code)" class="layui-input">
							</td>
							<td>
								<input type="text" name="valuedesp" autocomplete="off" value="#(obj.desp)" class="layui-input">
							</td>
							<td>
								<input type="text" name="valuepx" autocomplete="off" value="#(obj.px)" class="layui-input">
							</td>
							<td>
								<input type="hidden" name="valueid" value="#(obj.id)">
								#if(obj.id==null)
								<button class="layui-btn layui-btn-danger" style="display: none;" type="button" onclick="delTemplate(this);">-</button>
								#end
							</td>
						</tr>
					#end
					
				</tbody>
			</table>
		</div>

	</div>

	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="detailForm">保存</button>
		</div>
	</div>



</form>


#end

#define js()

<script>
	layui.use('table', function() {
		var form = layui.form;
		var $ = layui.$;
		var layer = layui.layer;

		//对自定义的表单进行验证
		form.verify(layuiFormVerify);

		form.on('submit(detailForm)', function(data) {


			//特殊认证，认证加在此处，否则表单会自动跳转
			var val=$("#treeSelect").find(".layui-treeSelect:last").find("select").val();
			if(val==""){
				layer.msg('请选择商品类别', {
					time : 3000
				}, function() {
					
				});
				return false;
			}

			$(":input[name='categoryId']").val(val);

			//建议使用ajax在此处提交。

			//最终提交前删除模板数据
			$("#dataTbody").find("tr:first").remove();
			$.ajax({
				type : 'post',
				url : '#(ctx_path)/admin/shop/attr/save',
				data : $("form").serialize(),
				success : function(data) {
					if (data.code == "0") {
						layer.msg('保存成功！', {
							time : 600
						}, function() {
							window.location.href = "#(ctx_path)/admin/shop/attr";
						});
					}else if(data.code == "11"){
						layer.msg('保存失败，该商品分类已存在！', {
							time : 2000
						}, function() {
							
						});
					}
				}
			});
			//此处使用异步的好处，服务器端可以直接验证，如果直接提交，提交完成以后，如果验证不通过，那么不方便处理错误的信息
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});

	});

	function addTemplate(){
		var trs=$("#dataTbody").find("tr");
		$("#dataTbody").append(trs[0].outerHTML);
		$("#dataTbody").find("tr:last").show();
		layui.form.render(); //更新全部
	}

	function delTemplate(obj){
		if($("#dataTbody").find("tr").length==1){
			layui.layer.msg('至少保留一个属性值', {
				time: 10000, //20s后自动关闭
				btn: [ '好']
			});
		}else{
			$(obj).parent().parent().remove();
		}
	}

	var nodes=[];

	function initTree(){
		$("#treeElem").html("");
		$.ajax({
			type:'get',
			url:'#(ctx_path)/admin/shop/category/tree',
			data:'',
			success:function(data){
				if(data.code=='0'){

					nodes=data.data;
					
					var categoryId=$(":input[name='categoryId']").val();
					if(categoryId){
						initForm(categoryId);
					}else{
						initForm();
					}

				}
			}
		});
	}

	function initForm(categoryId){
		layui.use('treeSelect',function(){
			var treeSelect=layui.treeSelect;
			treeSelect.init("#treeSelect",{
				nodes:nodes,
				data:categoryId,
			});
		});
		
	}

	$(function(){
		initTree();
	});



</script>

#end


